<template>
  <!-- 数字输入框  根据分区变化金额单位符号 -->
  <div class="inpout-layout">
    <el-input-number
      :value="value"
      :precision="precision"
      :controls="controls"
      :placeholder="placeholder"
      :size="size"
      style="width: 100%;"
      :disabled="disabled"
      @input="handleInput"
      @blur="handleBlur"
    />
    <span class="unit-box" style="position: absolute;">{{ text }}</span>
  </div>
</template>
<script>
import {
  // mapGetters,
  mapState
} from 'vuex'
export default {
  name: '',

  model: {
    prop: 'value',
    event: 'input'
  },

  props: {
    unit: {
      type: String,
      default: function() {
        return this.$store.state.user.unit
      }
    },

    // 输入框的值
    value: Number,
    precision: {
      type: Number,
      default: 2
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    controls: {
      type: Boolean,
      default: false
    },

	  size: {
		  type: String

	  },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      // text: '$'
    }
  },
  computed: {

    text() {
      const text = this.unit === 'RMB' ? '￥' : '$'
      return text
    }
  },
  watch: {

  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    handleInput(e) {
      this.$emit('input', e)
    }

  }
}
</script>

<style scoped lang="scss">
  .inpout-layout {
    position: relative;
/deep/.el-input__inner{
  padding-right: 36px !important;
}
    .unit-box {
      position: absolute;
      display: inline-block;
      top: 0;
      right: 0;
      width: 36px;
      text-align: center;
      font-size: 14px;
      color: rgba(51, 64, 74, 0.8);

    }
  }
</style>
